/* 数据格式演示1
var aqiSourceData = {
  "北京": {
    "2016-01-01": 10,
    "2016-01-02": 10,
    "2016-01-03": 10,
    "2016-01-04": 10
  }
};
*/

// 以下两个函数用于随机模拟生成测试数据
function getDateStr(dat) {
	var y = dat.getFullYear();
	var m = dat.getMonth() + 1;
	m = m < 10 ? '0' + m : m; //月份是个位数的就前面加0;
	var d = dat.getDate();
	d = d < 10 ? '0' + d : d;
	return y + '-' + m + '-' + d;
}

function randomBuildData(seed) {
	var returnData = {};
	var dat = new Date("2016-01-01");
	var datStr = ''
	for (var i = 1; i < 92; i++) { //得到91天的随机数据,每天的
		datStr = getDateStr(dat); //重新格式化成标准的日期格式,(因为下面 +1会产生不标准)
		returnData[datStr] = Math.ceil(Math.random() * seed); //得到日期和数据的值对
		dat.setDate(dat.getDate() + 1);
	}
	return returnData;
}

var aqiSourceData = {
	"北京": randomBuildData(500),
	"上海": randomBuildData(300),
	"广州": randomBuildData(200),
	"深圳": randomBuildData(100),
	"成都": randomBuildData(300),
	"西安": randomBuildData(500),
	"福州": randomBuildData(100),
	"厦门": randomBuildData(100),
	"沈阳": randomBuildData(500)
};

// 用于渲染图表的数据
var chartData = {};

// 记录当前页面的表单选项
var pageState = {
	nowSelectCity: -1,
	nowGraTime: "day"
}

/**
 * 渲染图表
 */
function Div(height) {
	var div = document.createElement("div");
	div.clientHeight = height;
	return div;
}

function renderChart() {
	var fdiv = document.getElementsByClassName("aqi-chart-wrap");
	for (var ddd in chartData) {
		fdiv.appendChild(new Div(chartData[ddd]));
	}
}

/**
 * 日、周、月的radio事件点击时的处理函数
 */
function graTimeChange() {
	// 确定是否选项发生了变化 
	alert(this.value);
	// 设置对应数据
initAqiChartData();
	// 调用图表渲染函数
	renderChart();
}

/**
 * select发生变化时的处理函数
 */
function citySelectChange() {
	// 确定是否选项发生了变化 
	
	var ops = document.getElementById("city-select").options;
	for (var i = 0; i < ops.length; i++) {
		if (ops[i].selected) {
			pageState.nowSelectCity = ops[i];
		}
	}
	// 设置对应数据

	// 调用图表渲染函数
	renderChart();
}

/**
 * 初始化日、周、月的radio事件，当点击时，调用函数graTimeChange
 */
function initGraTimeForm() {
	var gra=document.getElementsByName("gra-time");
	alert(gra.length);
	for(var i=0;i<gra.length;i++){
		gra[i].onclick=graTimeChange;
		alert("22")
	}
}

/**
 * 初始化城市Select下拉选择框中的选项
 */
function Op(tex) {
	var op = document.createElement("option");
	op.text = tex;
	return op;
}

function initCitySelector() {
	// 读取aqiSourceData中的城市，然后设置id为city-select的下拉列表中的选项
	var cSele = document.getElementById("city-select");
	for (var name in aqiSourceData) {
		var op = new Op(name);
		cSele.add(op, null);
	}
	// 给select设置事件，当选项发生变化时调用函数citySelectChange
	cSele.onchange = citySelectChange;
}

/**
 * 初始化图表需要的数据格式
 */
function initAqiChartData() {
	// 将原始的源数据处理成图表需要的数据格式
	// 处理好的数据存到 chartData 中
	alert(pageState.nowSelectCity)
	var op1=document.getElementById("city-select").options;
	op1[2].selected=true;
	pageState.nowSelectCity=op1[2];
	var sor = aqiSourceData[pageState.nowSelectCity]; //得到城市对应的91天数据
	var soGra = pageState.nowGraTime;
	
	for (var name in sor) {
		
		console.log(sor[name]);
	}

	switch (soGra) {
		case "day":
			chartData = sor;
			break;
		case "month":
			for (var name in sor) {
				//chartData[]
			}
			break;
		case "week":

			break;
	}
	/*for (var k = 0; k < ; k++) {

	}*/
}

/**
 * 初始化函数
 */
function init() {
	initGraTimeForm()
	initCitySelector();
	initAqiChartData();
}

init();

//alert("1");